<template>
    <div class="task-list">
        <page-main>
            <el-form :model="search" inline>
                <el-form-item label="任务名称">
                    <el-input v-model="search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="巡查人员">
                    <el-input v-model="search.realname" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="规则创建时间">
                    <el-date-picker v-model="search.rule_add_time" type="date" placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="initTaskList()" size="mini">搜索</el-button>
                    <el-button type="warning" @click="reset" size="mini">重置</el-button>
                    <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="taskData" v-loading="taskDataLoading">
                <el-table-column label="任务名称" prop="name" width="160"> </el-table-column>
                <el-table-column label="巡查规则名称" prop="rule_name" width="160"> </el-table-column>
                <el-table-column label="巡查人员" prop="realname" width="150"> </el-table-column>
                <el-table-column label="单位名称" prop="unit_name" width="200"></el-table-column>
                <el-table-column label="是否有隐患" prop="is_danger" width="120">
                    <template #default="scope">
                        <span>{{ scope.row.is_danger == 0 ? '无' : '有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否有故障" prop="is_fault" width="120">
                    <template #default="scope">
                        <span>{{ scope.row.is_fault == 0 ? '无' : '有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="规则创建时间" prop="rule_add_time" width="180"> </el-table-column>
                <el-table-column label="生成时间" prop="add_time" :formatter="formatDate" width="180"> </el-table-column>
                <el-table-column label="开始时间" prop="start_time" :formatter="formatDate" width="180"> </el-table-column>
                <el-table-column label="结束时间" prop="end_time" :formatter="formatDate" width="180"> </el-table-column>
                <el-table-column label="完成时间" prop="last_add_time" :formatter="formatDate" width="180">
                </el-table-column>
                <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
                <el-table-column label="巡查结果" prop="result" width="165">
                    <template #default="scope">
                        <span :style="scope.row.result == '不合格' ? 'color:red' : ''"> {{ scope.row.result }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="360" label="操作" fixed="right">
                    <template #header> </template>
                    <template #default="scope">
                        <div>
                            <el-button size="mini" @click="showTaskDetail(scope.row)">查看</el-button>
                            <el-button size="mini" type="warning" v-if="scope.row.status==0"
                                @click="auditAction(scope.row)">审核</el-button>
                            <el-button size="mini" type="warning"  v-if="scope.row.status==0"
                                @click="hanldeConfirmAuditing(scope.row)">驳回审核</el-button>
                            <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon="el-icon-info"
                                icon-color="red" title="确定删除？" @confirm="delTask(scope.row)" @cancel="cancelEvent">
                                <template #reference>
                                    <el-button size="mini" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="taskDetailVisible" width="50%" @close="closeDialog" destroy-on-close
                :close-on-click-modal="false">
            </el-dialog>
            <el-dialog v-model="addTasklVisible" width="35%" destroy-on-close @close="closeDialog"
                :close-on-click-modal="false">
                <div>
                    <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign">
                        <el-form-item label="任务名称">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="时间选择">
                            <el-date-picker type="datetimerange" v-model="addTime" @change="startEndDate"
                                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="x">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="任务巡查人">
                            <el-select v-model="formData.unit_user_id" filterable multiple placeholder="请选择">
                                <el-option v-for="item in patrolPersonList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务巡查点">
                            <el-select v-model="formData.info" filterable multiple placeholder="请选择">
                                <el-option v-for="item in pointList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-fotm-item>
                            <el-button type="primary" size="medium" @click="submit">提交</el-button>
                        </el-fotm-item>
                    </el-form>
                </div>
            </el-dialog>
            <!-- 分页 -->
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" v-model:currentPage="taskDataInfo.page"
                    :total="taskDataInfo.total" :page-count="taskDataInfo.total_page" background
                    layout="total,prev, pager, next, jumper">
                </el-pagination>
            </div>
        </page-main>
    </div>
</template>
<script>
import { audit } from '@/api/uniTaskMange'
export default {
    data() {
        return {
            taskData: [],
            taskDataLoading: false,
            taskDataInfo: '',
            opts: {},
            addTasklVisible: false,
            taskDetailVisible: false,
            showAddTask: false,
            formData: {
                info: [],
                name: '',
                end_time: 0,
                start_time: '',
                unit_user_id: []
            },
            value: [],
            pointList: [],
            patrolPersonList: [],
            is_patrol: 1,
            addTime: '',
            search: {},
            filterData: {
                id: '',

                task_name: '', //任务名称
                realname: '', //巡查人员
                is_danger: '',
                is_fault: '',
                add_time: '',
                start_time: '',
                finish_time: '',
                end_time: ''
            },
            dangerOptions: [
                {
                    label: '无',
                    value: 0
                },
                {
                    label: '有',
                    value: 1
                }
            ],
            guzhangOptions: [
                {
                    label: '无',
                    value: 0
                },
                {
                    label: '有',
                    value: 1
                }
            ]
        }
    },
    created() {
        this.opts = Object.assign({}, this.opts, this.$route.query)
        this.initTaskList()
        this.initInfo() //巡查点列表获取+巡查人获取
    },
    methods: {
        hanldeConfirmAuditing(row) {

            this.$confirm('是否审核驳回该巡查任务？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    this.$api.post('/unit/PatrolTask/examine',{taskId:row.id,status:300}).then((res) => {
                    this.$message.success(res.msg)
                    this.initTaskList()
                })
                })
                .catch(() => { })
        },
        subFilter() {
            //提交过滤
            this.initTaskList()
        },
        resetFilter() {
            //过滤重置
            this.filterData = {
                id: '',
                task_name: '', //任务名称
                inspector: '', //巡查人员
                is_danger: '',
                is_fault: '',
                add_time: '',
                start_time: '',
                finish_time: '',
                end_time: ''
            }
            this.initTaskList()
        },
        reset() {
            this.search = {}
            this.initTaskList(1)
        },
        auditAction(row) {
            this.$confirm('是否审核通过该巡查任务？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    this.$api.post('/unit/PatrolTask/examine',{taskId:row.id,status:300}).then((res) => {
                    this.$message.success(res.msg)
                    this.initTaskList()
                })
                })
                .catch(() => { })
        },
        onDownExcel() {
            this.$api
                .post(
                    '/unit/PatrolTask/listsExel',
                    {
                        is_patrol: 1,
                        ...this.search
                    },
                    {
                        responseType: 'blob'
                    }
                )
                .then((res) => {
                    const blob = new Blob([res], {
                        type: 'application/vnd.ms-excel'
                    })
                    if (window.navigator.msSaveOrOpenBlob) {
                        //兼容IE10
                        navigator.msSaveBlob(blob, '导出文件.xlsx')
                    } else {
                        const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                        const a = document.createElement('a') //创建a标签
                        a.style.display = 'none'
                        a.href = href // 指定下载链接
                        a.download = '导出文件.xlsx' //指定下载文件名
                        a.click() //触发下载
                        URL.revokeObjectURL(a.href) //释放URL对象
                    }
                })
        },
        initInfo() {
            this.$api.post('/unit/PatrolPosition/all', this.opts).then((res) => {
                this.pointList = res.data
            })
            let params = JSON.parse(JSON.stringify(this.opts))
            // params.not_admin=1
            params.authority = ['unit_worker']
            this.$api.post('/unit/UnitContacts/all', params).then((res) => {
                this.patrolPersonList = res.data
            })
        },
        formatDate(row, column, time, index) {
            return this.$getDateTime(time)
        },
        handleCurrentChange(e) {
            this.initTaskList(e)
        },
        startEndDate(e) {
            this.formData.start_time = e[0]
            this.formData.end_time = e[1]
        },
        isPatrolChange(e) {
            this.resetFilter()
            //   this.initTaskList();
        },
        initTaskList(page) {
            this.taskDataLoading = true
            let pageData = {
                is_patrol: this.is_patrol,
                rows: 13,
                ...this.search
            }
            if (page) {
                pageData.page = page
            } else {
                pageData.page = 1
            }
            pageData.is_admin = 1
            pageData.examine_user_id = 0
            this.$api
                .post('/unit/PatrolTask/lists', pageData)
                .then((res) => {
                    this.taskData = res.data.lists
                    delete res.data.lists
                    this.taskDataInfo = res.data
                })
                .finally(() => {
                    this.taskDataLoading = false
                })
        },
        showTaskDetail(row) {
            this.$router.push({
                name: 'unitTaskMangeDetail',
                query: {
                    id: row.id
                }
            })
            //查看详细
            //   this.taskDetailVisible = true;
        },
        delTask(data) {
            //删除任务
            this.$api.post('/unit/PatrolTask/delete', { id: data.id }).then((res) => {
                this.initTaskList()
            })
        },
        addTask() {
            this.addTasklVisible = true
        },
        submit() {
            this.$api.post('/unit/PatrolTask/addTaskPoint', this.formData).then((res) => {
                this.initTaskList()
                this.addTasklVisible = false
            })
        }
    }
}
</script>
<style scoped lang="scss">
.filter {
    margin: 20px;
    padding: 20px;
    background-color: #fff;

    .filter-row {
        .el-col-6 {
            display: flex;
            align-items: center;
            max-width: 20%;
            margin-bottom: 20px;
        }

        .el-col-8 {
            margin-bottom: 20px;
        }

        .flexRow {
            display: flex;
            align-items: center;

            .label {
                width: 100px;
            }
        }
    }

    .filter-btns {
        text-align: right;
    }
}

.add-task-btn {
    float: right;
}

.start-end-date {
    margin: 30px 0;
}

.add-btn-wrapper {
    display: flex;
    justify-content: space-around;
    padding: 30px 0 20px;
}

.el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
}

:deep(.el-cascader-panel .el-radio__input) {
    visibility: hidden;
}

.el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
}

.block {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
